<template>
  <div>
    <common-header :showinput="true" :showback="false"></common-header>
    <div class="page-content">
      <mt-button @click="todetail">home</mt-button>
      <mt-button @click="increase" size="large">num</mt-button>
      <mt-button @click="login" size="large">login</mt-button>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapGetters, mapState} from 'vuex'
import commonHeader from 'common/common-header'
import * as homeApi from 'api/home-api'
import { ERR_SUCCESS } from 'config/index'
export default {
  data () {
    return {
      num: 0
    }
  },
  created() {
    console.log(ERR_SUCCESS)
  },
  methods: {
    ...mapMutations({
      setNum: 'SET_NUM'
    }),
    todetail() {
      this.$router.togo('/Home/Detail')
    },
    increase() {
      // console.log(this.$store.state.home.number)
      this.num++
      this.setNum(this.num) // 将this.num转入setNum
    },
    login() {
      let params = {
        // password: 'gs123456',
        // storeNo: '',
        // userName: '17326015487'
      }
      homeApi.indexapi(params).then((res) => {
        let {data} = res
        if (data.errno === ERR_SUCCESS) {
          console.log(data)
        } else {

        }
      }).catch(() => {

      })
    }
  },
  components: {
    commonHeader
  },
  computed: {
    ...mapGetters([
      'number'
    ]),
    ...mapState({
      number: state => state.home.number
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/mixin.less";
@import "~styles/variable.less";
</style>
